<template>
  <div>
    <navbar></navbar>
    <div class="content">
      <b-tabs size="is-medium" class="block">
        <b-tab-item label="按文本查询" icon="cloud-search">
          <div style="margin: 0px 30% 0px 30%">
            <vs-input v-model="value" placeholder="搜索站内图片">
              <template #icon>
                <i class="bx bxs-search"></i>
              </template>
            </vs-input>
            <vs-button icon color="#7d33ff" relief @click="search(1)">
              <i class="bx bxs-paper-plane"></i>
            </vs-button>
          </div>
        </b-tab-item>
        <b-tab-item label="按tag查询" icon="tag">
          <div style="margin: 0px 30% 0px 30%">
            <vs-input v-model="value" placeholder="搜索站内图片">
              <template #icon>
                <i class="bx bxs-search"></i>
              </template>
            </vs-input>
            <vs-button icon color="#7d33ff" relief @click="search(0)">
              <i class="bx bxs-paper-plane"></i>
            </vs-button>
          </div>
        </b-tab-item>
        <b-tab-item label="按时间查询" icon="clock-outline">
          <div style="margin: 0px 30% 0px 30%">
            <h4>按时间搜索帖子</h4>
            <b-field label="起始时间" :label-position="labelPosition">
              <b-datepicker
                name="begin_time"
                type="text"
                v-model="begin_time"
                expanded
                placeholder="Type or select a date..."
                icon="calendar-today"
                :locale="locale"
                editable
              >
              </b-datepicker>
            </b-field>
            <b-field label="最后时间" :label-position="labelPosition">
              <b-datepicker
                name="end_time"
                type="text"
                v-model="end_time"
                expanded
                placeholder="Type or select a date..."
                icon="calendar-today"
                :locale="locale"
                editable
              >
              </b-datepicker>
            </b-field>
            <vs-button @click="searchtime()">提交</vs-button>
          </div>
        </b-tab-item>
      </b-tabs>
    </div>
  </div>
</template>
<script>
import navbar from "../components/common/navbar.vue";
export default {
  components: { navbar },
  name: "searchpro",
  data() {
    return {
      locale: "en-CA",
      begin_time: "",
      end_time: "",
      status: "",
      value: "",
    };
  },
  methods: {
    //db is object
    async search(db) {
      this.status=await db;
      if (this.status == "1") {
        this.$router.push({
          path: "/search",
          query: {
            value: this.value,
            status: 1,
          },
        });
      } else if (this.status == "0") {
        this.$router.push({
          path: "/search",
          query: {
            value: this.value,
            status: 0,
          },
        });
      }
    },
    async searchtime() {
      // this.begin_time.setDate(this.begin_time.getDate() + 1);
      console.log(this.begin_time);
      // this.end_time.setDate(this.end_time.getDate() + 1);
      console.log(this.end_time);
      this.$router.push({
        path: "/search",
        query: {
          begin_time: this.begin_time.toISOString(),
          end_time: this.end_time.toISOString(),
          status: "3",
        },
      });
    },
  },
};
</script>

<style scoped>
.content {
  margin-top: 70px;
  min-height: calc(100vh - 34px);
}
</style>